---
title: Desenvolvimento e build
description: 'Como iniciar um novo projeto.'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Com o seu projeto pronto, agora você já pode começar a construir com o Astro! 🚀

## Edite seu projeto

Para fazer mudanças, primeiro abra o seu projeto num editor de código. Rodando o seu projeto no modo de desenvolvimento, te permite ter atualizações em tempo real, assim que você edita o seu código.

Você pode [customizar alguns aspectos no seu ambiente de desenvolvimento](#configure-o-seu-ambiente-de-desenvolvimento) como TypeScript ou instalando a extensão oficial do Astro para o seu editor.

### Iniciando o servidor de desenvolvimento do Astro

O Astro já vem com um ambiente de desenvolvimento, que é tudo que você precisa para construir o seu projeto. O comando `astro dev` que existe na CLI do Astro, inicia esse ambiente, que é onde você pode visualizar o seu site em ação pela primeira vez.

Todo template inicial já possui a pré-configuração do comando `astro dev` pra você. Depois de explorar os arquivos do seu projeto, use o seu gerenciador de pacotes favorito para rodar esse comando e iniciar o ambiente de desenvolvimento do Astro.  

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


Se tudo der certo, O Astro vai disponibilizar o seu projeto em [http://localhost:4321/](http://localhost:4321/). Abra esse link no seu navegador e veja o seu novo site!

### Trabalhando no modo de desenvolvimento

O Astro irá observer as mudanças que houveram nos seus arquivos dentro da pasta `src/` e vai atualizar a página a medida que você desenvolve, então não será necessário reiniciar o servidor quando você fizer alguma alteração durante o desenvolvimento. Você sempre será capaz de ver a versão mais atualizada do seu site no seu navegador em quanto o ambiente estiver rodando.

Visualizando o seu site no navegador, você terá acesso a [barra de ferramentas de desenvolvimento do Astro](/pt-br/guides/dev-toolbar/). Durante o desenvolvimento ela ajudará você a inspecionar as [ilhas](/pt-br/concepts/islands/), mostrando problemas de acessibilidade, e mais.

Caso não consiga visualizar o projeto no navegador após iniciar o ambiente de dev, volte ao terminal onde rodou o comando `dev` e verifique a mensagem que é exibida. Ela dirá se ocorreu algum erro, ou se o seu projeto está disponível numa URL diferente de [http://localhost:4321/](http://localhost:4321/).

## Build e pré-visualização

Para saber como será a versão do seu site durante o tempo de build, saia do ambiente de dev (<kbd>Ctrl</kbd> + <kbd>C</kbd>) e rode o comando de build apropriado ao seu gerenciador de pacotes no seu terminal:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

O Astro irá gerar a versão do seu site pronta pra deploy numa pasta separada (`dist/` por padrão) e você pode acompanhar o progresso no seu terminal. Você será avisado de qualquer erro no seu projeto durante o processo antes de fazer deploy. Se o TypeScript estiver configurado como `strict` ou `strictest`, o comando `build` verificará a existência de erros no seu projeto.

Assim que a build tiver sido finalizada, rode o comando apropridado `preview` (por ex. `npm run preview`) no seu terminal e você conseguirá ver a versão da build do seu site na mesma janela de pré-visualização.

Note que essa pré-visualização do seu código é resultado da última execução do comando de build. Isso significa que você terá uma pré-visualização de como o seu site será após fazer deploy. Qualquer mudança feita no seu código após o comando de build, **não** será refletida em quanto você estiver pré-visualizando o seu site até que você rode o comando de build novamente.

Use (<kbd>Ctrl</kbd> + <kbd>C</kbd>) para sair do modo de pré-visualização, assim que reiniciar o ambiente de dev, você estará [trabalhando no modo de desenvolvimento](#trabalhando-no-modo-de-desenvolvimento) que atualizará a pré-visualização a medida que você edita o seu código.

<ReadMore>Leia mais sobre a [CLI do Astro](/pt-br/reference/cli-reference/) e os comandos disponíveis em quanto desenvolve com o Astro.</ReadMore>

:::tip 
Você pode desejar [fazer o deploy da melhor maneira](/pt-br/guides/deploy/), antes de fazer muitas alterações no seu código. Pode ser muito útil, no seu site e pode te economizar muito tempo e esforço evitando atrasos no seu deploy.
:::

## Próximos Passos

Parabéns! Agora você está pronto para começar a construir com o Astro! 🥳

Aqui vai algumas pequenas recomendações do que você pode explorar em seguida. Você pode ler em qualquer ordem. Você até pode deixar um pouco a nossa documentação, e voltar quando tiver algum problema ou dúvida.

### Configure o seu ambiente de desenvolvimento

Explore os guias abaixo para customizar a sua experiência de desenvolvimento.

<CardGrid>
  <LinkCard
    title="Configuração do editor"
    description="Personalize seu editor de código para melhorar a experiência de desenvolvedor Astro e destravar novas funcionalidades."
    href="/pt-br/editor-setup/"
  />
  <LinkCard
    title="Barra de Ferramentas de Desenvolvimento"
    description="Explore as mais úteis funcionalidades da barra de ferramentas de desenvolvimento."
    href="/pt-br/guides/dev-toolbar/"
  />
  <LinkCard
    title="Configurando TypeScript"
    description="Configure opções de tipagem, IntelliSense, e mais."
    href="/pt-br/guides/typescript/"
  />
</CardGrid>

### Explore as Funcionalidades do Astro

<CardGrid>
  <LinkCard
    title="Estrutura de Projetos"
    description="Aprenda mais sobre a estrutura de arquivos do Astro no nosso guia de estrutura de projeto."
    href="/pt-br/basics/project-structure/"
  />
  <LinkCard
    title="Crie coleções de conteúdo"
    description="Adicione conteúdos ao seu site com frontmatter, validação e tipagem segura."
    href="/pt-br/guides/content-collections/"
  />
    <LinkCard
    title="Adicione transicão entre visualizações"
    description="Crie páginas com transições e animações suaves."
    href="/pt-br/guides/view-transitions/"
  />
  <LinkCard
    title="Aprenda mais sobre ilhas"
    description="Leia sobre a arquitetura de islands do Astro."
    href="/pt-br/concepts/islands/"
  />
</CardGrid>

### Faça o tutorial introdutório

Construa um blog totalmente funcional a partir de uma página em branco no nosso [tutorial introdutório](/pt-br/tutorial/0-introduction/).

Este é um bom caminho para saber como o Astro funciona e te mostra o básico sobre as páginas, layouts, componentes, rotas, ilhas, e mais. Incluindo também uma unidade opcional e totalmente amigável para aqueles que estão iniciando nos conceitos de desenvolvimento web de modo geral, que vai te guiar na instalação das ferramentas necessárias no seu computador, criando uma conta no Github, e fazendo deploy do seu site.

